<template>
    <div class="first_level_page">
        <head-top></head-top>
        <carousel class="marginTop adCarousel" :responsive="44" :indicators="true" :auto="20000">
            <div>
                <div class="to_forget">
                    <img src="../../images/网上商城.jpg">
                </div>
                <div class="to_forget">
                    <img src="../../images/slider2.jpg">
                </div>
            </div>
        </carousel>
        <nav class="home_nav">
            <router-link to="/brandList" class="nav_div">
                <img src="../../images/navBrand.png">
                <div class="nav_text">品牌专区</div>
            </router-link>
            <router-link to="/order" class="nav_div">
                <img src="../../images/navOrder.png">
                <div class="nav_text">我的订单</div>
            </router-link>
            <router-link to="/offenList" class="nav_div">
                <img src="../../images/navOffen.png">
                <div class="nav_text">常购清单</div>
            </router-link>
            <div @click="comingSoon" class="nav_div">
                <img src="../../images/navStatistics.png">
                <div class="nav_text">订单统计</div>
            </div>
        </nav>
        <!-- 活动专区 -->
        <section class="home_section promotion_section">
            <div class="section_top">
                <div class="title">活动专区</div>
            </div>
            <carousel :responsive="37.3333" :indicators="true" :auto="30000">
                <div>
                    <a target="_blank" class="to_forget">
                        <img src="../../images/秒杀区.jpg">
                    </a>
                </div>
            </carousel>
        </section>
        <!-- 热销商品 -->
        <section class="home_section promotion_section">
            <div class="section_top">
                <div class="title">商品秒杀</div>
                <van-count-down :time="time" class="count-down" ref="countDown">
                    <template #default="timeData">
                      <span class="distance">距离开始</span>
                      <span class="colon">:</span>
                        <span class="block">{{ timeData.hours }}</span>
                        <span class="colon">时</span>
                        <span class="block">{{ timeData.minutes }}</span>
                        <span class="colon">分</span>
                        <span class="block">{{ timeData.seconds }}</span>
                        <span class="colon">秒</span>
                    </template>
                </van-count-down>
                <router-link :to="{ path: '/goodsList2', query: { flag: 1, key: '', goodsNameList: goodsNameList} }" class="more">
                    <span>更多</span>
                    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
                        viewBox="0 0 18 20">
                        <polyline points="0,0 14,10 0,20" style="fill:none;stroke:rgb(153,153,153);stroke-width:4" />
                    </svg>
                </router-link>
            </div>
            <div class="section_main">
                <dl class="goods_dl left" v-for="item in goodsNameList" :key="item.id">
                    <div @click="toGoodsDetail(item)" >
                        <dt class="goods_dt">
                          <img :src="item.bmSpecificationList[0].goodsImgUrl" style="object-fit: cover; width: 100%; height: 80%;">
<!--                            <img src="../../images/goods01.png">-->
                        </dt>
                        <dd class="goods_dd">
                            <div class="goods_name">
                                {{item.goodsName}}
                            </div>
                          <div class="goods_specification_name">
                            {{item.bmSpecificationList[0].specificationName}}
                          </div>
                          <div class="goods_oldPrice">
                            ￥{{item.bmSpecificationList[0].oldPrice}}
                          </div>
                            <div class="goods_price">
                              ￥{{item.bmSpecificationList[0].price}}
                            </div>
                        </dd>
                    </div>
                </dl>
                <div class="clear"></div>
            </div>
        </section>
        <!-- 新品推荐 -->
        <section class="home_section promotion_section">
            <div class="section_top">
                <div class="title">新品推荐</div>
                <router-link :to="{ path: '/goodsList', query: { flag: 2,key:'',isRecommond:1} }" class="more">
                    <span>更多</span>
                    <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1"
                        viewBox="0 0 18 20">
                        <polyline points="0,0 14,10 0,20" style="fill:none;stroke:rgb(153,153,153);stroke-width:4" />
                    </svg>
                </router-link>
            </div>
            <div class="section_main">
                <dl class="goods_dl left" v-for="(item, index) in recommonGoodsList"  v-if="index < 3" >
                    <div @click="toGoodsDetail(item)">
                        <dt class="goods_dt">
                            <img :src="item.bmSpecificationList[0].goodsImgUrl">
                        </dt>
                        <dd class="goods_dd">
                            <div class="goods_name">
                              {{ item.goodsName }}
                            </div>
                          <div class="goods_specification_name">
                            {{item.bmSpecificationList[0].specificationName}}
                          </div>
                            <div class="goods_price">￥{{ item.bmSpecificationList[0].oldPrice }}</div>
                        </dd>
                    </div>
                </dl>

        <div class="clear"></div>
      </div>
    </section>
    <alert-tip
      v-if="showAlert"
      @closeTip="showAlert = false"
      :alertText="alertText"
    ></alert-tip>
    <div class="heightBottom"></div>

    <transition name="loading">
      <loading v-if="showLoading"></loading>
    </transition>

    <foot-guide></foot-guide>
  </div>
</template>

<script>
import { mapState } from "vuex";
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/footGuide";
import Carousel from "vue-m-carousel";
import alertTip from "src/components/common/alertTip";
import { defaultImg, defaultCarouselImg } from "src/config/env";
import { getSellerIndex, goodsList } from "../../service/getData";
import { imgToSamll } from "src/config/mUtils";
import loading from "src/components/common/loading";
import { getAdminList } from "src/service/api.js";
import { getGoodsName } from "../../service/api";
import { recommondGoodsList } from "../../service/brand";

export default {
    data() {
        return {
            adlist: 1, //轮播图列表
            goodsList: null, //推荐商品列表
            hotgoodsList: null, //热销商品列表
            flag: 1,//跳转页面标记 1.热销商品页面  2.新品推荐页面
            goodsId: 0, // 商品id
            showAlert: false,
            alertText: '',
            showLoading: true, //显示加载动画
            // time: 30 * 60 * 60 * 1000,
            time: 0,
            // time: null,
            goodsNameList: [],
          recommonGoodsList:[],
        }
    },
    created() {
      this.getGoodsNameList();
      this.getRecommonList();
    },
    mounted() {
        document.body.scrollTop = 0;
        this.getMySellerIndex();
        // 测试接口
/*        getAdminList({
            "deptId": 8,
            "classId": 2046,
            "recordType": 1,
            "schoolYear": 1
        }).then((res)=>{
            console.log('-------->',res.data.rows);
        }) */
    },
    components: {
        headTop,
        footGuide,
        Carousel,
        alertTip,
        loading,
    },
    computed: {
        ...mapState([
            'userInfo',
        ]),
    },
    methods: {
      // onFinish() {
      //   this.$refs.countDown.$el.innerHTML = '<span style="color: red; font-size: 60px;">开始秒杀</span>';  // 修改模板内容
      // },
        //获取商家首页内容
        async getMySellerIndex() {
            this.showLoading = false;
        },
        toGoodsDetail(item) {
          console.log("1111",item,item.bmSpecificationList[0].id);
            this.$router.push({ path: '/goodsDetail', query: {id: item.bmSpecificationList[0].id} });
        },
        comingSoon() {//敬请期待
            this.showAlert = true;
            this.alertText = '敬请期待';
        },
        async search() {
            this.$router.push({ path: '/goodsDetail', query: {} });
        },
        getGoodsNameList(){
          getGoodsName().then(response =>{
            console.log("response=",response);
            this.goodsNameList =response.data.data.slice(0,3);
            // this.time = this.goodsNameList.bmPreferentiallist[0].startTime;
            const startTime = new Date(this.goodsNameList[0].bmPreferentiallist[0].startTime).getTime(); // 将开始时间转换为时间戳
            const currentTime = new Date().getTime(); // 获取当前时间的时间戳
            const timeDifference = startTime - currentTime; // 计算时间差值
            this.time = timeDifference; // 将差值赋值给time
            console.log(this.time);
          })
        },

    getRecommonList() {
      recommondGoodsList().then((response) => {
        this.recommonGoodsList = response.data.data;
      });
    },
  },
  watch: {},
};
</script>

<style lang="less">
.count-down {
  float: left;
  width: auto;
  height: 0.8rem;
  z-index: 2;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 30px;

  // Vant倒计时样式
  .colon {
    display: inline-block;
    margin: 0 5px;
    font-size: 16px;
    color: #ee0a24;
  }

    .block {
        display: inline-block;
        width: 35px;
        color: #fff;
        font: 12px/.4rem '';
        height: .4rem;
        text-align: center;
        background-color: #ee0a24;
    }
  .distance{
    display: inline-block;
    width: 100px;
    color: #fff;
    font: 18px/.4rem '';
    height: .4rem;
    text-align: center;
    background-color: #ee0a24;
  }
}



.carousel {
  width: 100%;
  background: $bgColor;

  .carousel-indicators {
    position: absolute;
    height: 0.14rem;
    bottom: 0.2rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
  }

  .carousel-item div {
    width: 100%;
    height: 100%;
  }

  .carousel-item div img {
    width: 100%;
    height: 100%;
  }

  .carousel-dot {
    width: 0.14rem;
    height: 0.14rem;
    margin: 0 0.14rem;
    background: rgba(233, 233, 233, 1);
    border-radius: 0.07rem;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }

  .carousel-dot.active {
    background: rgba(233, 233, 233, 0.4);
  }
}
</style>
<style lang="scss" scoped>
@import "src/style/mixin";

.home_nav {
  clear: both;
  background: #fff;
  @include wh(100%, 2rem);

  .nav_div {
    float: left;
    width: 25%;
    text-align: center;

    img {
      display: block;
      margin: 0 auto;
      margin-top: 0.32rem;
      margin-bottom: 0.2rem;
      @include wh(0.9rem, 0.9rem);
    }

    .nav_text {
      @include sc(0.24rem, #333);
      line-height: 0.24rem;
    }
  }
}

.home_section {
  margin-top: 0.2rem;

  .section_top {
    clear: both;
    background: #fff;
    @include wh(100%, 0.8rem);

    .title {
      float: left;
      text-align: left;
      @include sc(0.3rem, #333);
      font-weight: bold;
      line-height: 0.8rem;
      padding-left: 0.2rem;
    }

    .more {
      float: right;
      text-align: right;
      line-height: 0.8rem;
      @include sc(0.26rem, #999);

      svg {
        @include wh(0.14rem, 0.2rem);
        margin-left: 0.1rem;
        margin-right: 0.2rem;
      }
    }
  }

  .section_main {
    width: 100%;
    margin-top: 0.01rem;

    .goods_dl {
      background: #fff;
      width: 33.33%;
      border: 0.01rem solid $bgColor;
      border-left: none;
      border-bottom: none;

      .goods_dt {
        height: 2.98rem;
        width: 100%;
        text-align: center;

        img {
          width: 91.6%;
          margin-top: 0.345rem;
        }
      }

      .goods_dd {
        padding: 0 0.2rem;

        .goods_name {
          @include sc(0.26rem, #333);
          line-height: 0.315rem;
          height: 0.6rem;
          overflow: hidden;
        }

        .goods_price {
          @include sc(0.32rem, #f51605);
          line-height: 0.92rem;
        }
        .goods_oldPrice {
          @include sc(0.2rem, rgba(100, 71, 71, 0.96));
          line-height: 0.2rem;
          text-decoration: line-through;
        }
      }
    }

    .goods_dl:nth-child(3n) {
      border-right: none;
    }
    .goods_specification_name {
      @include sc(0.2rem, grey);
      line-height: 0.16rem;
      height: 0.4rem;
      overflow: hidden;
    }
  }
}
</style>
